<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				position: relative;
				width: 200px;
				height: 30px;
				margin: 50px auto;
				border: 1px solid hotpink;
			}
			div::after {
				content: '';
				position: absolute;
				top: 7px;
				right: 15px;
				width: 10px;
				height: 10px;
				border-right: 1px solid black;
				border-bottom: 1px solid black;
				/* 设置旋转的中心点就可以实现位置矫正 */
				transform-origin: 8px 8px;
				transform: rotate(45deg);
				transition:all .1s;
			}
			div:hover::after {
				transform: rotate(-135deg);
				/* 注意这里的角度都是按照原来的初始来说，初始都是0，所以要设置成225 即45+180 */
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
